import {
    createCustomComponent
} from "vue-amap";
import {
    mountedRenderFn,
    mountedRenderFnContext
} from "./utils/compile";
export const customMarkerCluster = createCustomComponent({
    data() {
        return {
            markers: [],
            MarkerClusterer:null
        };
    },
    props: {
        gridSize: {
            type: Number,
            default () {
                return 60;
            }
        },
        markerList: {
            type: Array,
            default () {
                return [];
            }
        },
        markerContent: {},
        // renderCluserMarker: {},
        events: {},
        extData: {},
        renderCluserMarker: {}
    },
    converters: {
        renderCluserMarker(renderFn) {
            return context => {
                const template = mountedRenderFnContext(
                    renderFn,
                    this.extData,
                    context
                );
                this.$customContent = template;
                var offset = new AMap.Pixel(-9, -9);
                context.marker.setContent(template.$el);
                context.marker.setOffset(offset);
            };
        },
        markerContent(renderFn) {
            return undefined;
        },
        markerList(list) {
            return undefined;
        }
    },
    init(options) {
        if (this.markerList.length > 0) {
            // console.log('list',this.markerList);
            for (let i in this.markerList) {
                let marker = new AMap.Marker({
                    position: this.markerList[i].position,
                    content: this.getMarkerContent(this.markerList[i]),
                    extData: this.markerList[i],
                    anchor:'center',//锚点
                    offset: new AMap.Pixel(0,0)
                });
                marker.on('click',e=>{
                    this.$emit("oneMarkerClick", e);
                })
                this.markers.push(marker);
            }
        }
        options.averageCenter = true
        return new Promise(resolve => {
            AMap.plugin(["AMap.MarkerClusterer"], () => {
                this.MarkerClusterer = new AMap.MarkerClusterer(
                    options.map,
                    this.markers,
                    options
                );
                resolve(this.MarkerClusterer);
            });
        });
    },
    methods: {
        getMarkerContent(data) {
            if (this.markerContent) {
                const template = mountedRenderFn(this.markerContent, data);
                return template.$el;
            } else {
                return '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>';
            }
        }
    },
    contextReady() {}
});
